<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .box {
            border: 1px solid #cccccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <comp-a></comp-a>
        <hr>
        <comp-b></comp-b>
    </div>
    <template id="compa">
        <div class="box">
            <h3>子组件A</h3>
            <p>msg:{{ msg }}</p>
            <p>info:{{ info }}</p>
            <input type="button" value="getMsg" @click="getMsg()">
        </div>
    </template>
    <template id="compb">
        <div class="box">
            <h3>子组件B</h3>
            <p>msg:{{ msg }}</p>
            <input type="button" value="将数据存储于dataBus" @click="setMsg()">
            <p>info:{{ info }}</p>
            <input type="button" value="将数据存储于eventBus" @click="sendInfo()">

        </div>
    </template>
</body>
<script>
    /*
        目的：在项目中提供一个可以被所有组件都能访问的区域，借助于这个区域完成数据传递
        在JS 全局中定义一个用于共享承载数据的变量

        事件总线，是结合全局变量共享，和vue的自定义事件功能实现的相关操作
            1、借助一个 vue 实例可以使用 _events 事件仓库的功能
            2、在传递数据的组件，通过调用 eventBus 的自定义事件完成数据传递
                -> vue 触发自定义事件 使用 vm.$emit
            3、在接收数据的组件中，为eventBus 加载自定义事件
                -> vue 的实例方法 vm.$on(eventName,callback)
                -> eventName 自定义事件名 => $on 绑定自定义事件时，不做事件名称转换
                -> callback 事件触发的回调函数,接受多个该事件触发时的传入参数
    */
    const dataBus = {};
    const eventBus = new Vue();
    // eventBus.$on("aaa",function(arg){
    // });

    Vue.component("CompA", {
        template: "#compa",
        data(){
            return {
                msg:"",
                info:""
            }
        },
        methods: {
            getMsg(){
                this.msg = dataBus.msg
            }
        },
        mounted() {
            console.log(dataBus,eventBus);
            eventBus.$on("loadInfo",(arg)=>{
                console.log("组件B：",arg,this);
                this.info = arg;
            })
        },
    });
    Vue.component("CompB", {
        template: "#compb",
        data(){
            return {
                msg:"组件B的数据",
                info:"events-组件B的数据"
            }
        },
        methods: {
            setMsg(){
                dataBus.msg = this.msg;
            },
            sendInfo(){
                console.log("组件A===>");
                eventBus.$emit("loadInfo",this.info);
            }
        },
        mounted() {
            console.log(dataBus,eventBus);
            this.sendInfo();
        },
    })
    new Vue({
        el: '#app',
        mounted() {
            console.log(dataBus,eventBus);
        },
    });
</script>

</html>